<template>
	<view>
		<view class="edit-row">
			<text class="font28 color999">共{{goodsList.length}}个收藏</text>
			<text class="font28" style="color: #FF5E00;" @click="edit(checkHide)">{{checkHide?'完成':'编辑'}}</text>
		</view>
		<view class="list">
			<!-- 收藏商品 -->
			<view class="sub-list goods" :class="subState">
				<view class="tis" v-if="goodsList.length==0">没有数据~</view>
				<view class="all-row" v-else>
					<view class="row" v-for="(row,index) in goodsList" :key="index">
						<!-- 删除按钮 -->
						<view class="menu" @tap.stop="deleteCoupon(row.goods_id,goodsList)">
							<view class="font30">删除</view>
						</view>
						<!-- content -->

						<view class="carrier" :class="[typeClass=='goods'?theIndex==index?'open':oldIndex==index?'close':'':'']"
						 @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
							<view class="goods-info">
								<view class="checkbox-box" v-if="checkHide">
									<label>
										<checkbox :value="0" color="#FF5E00" :checked="row.selected" @click="allCheck('item', index)" /><text></text>
									</label>
								</view>
								<view class="img"  @click="navTo('product',row.goods_id)">
									<image :src="row.goods_pic[0]"></image>
								</view>
								<view class="info"  @click="navTo('product',row.goods_id)">
									<view class="title">{{row.goods_title}}</view>
									<view class="price-number">
										<text class="price" v-if="userInfo.member_type==1||userInfo.member_type==2">
											<text class="price-tip">¥</text>{{row.svip.min==undefined?'-': row.svip.max | money}}
											~ <text class="price-tip">¥</text>{{row.svip.min==undefined?'-': row.svip.max | money}}
										</text>
										<text class="price" v-else-if="userInfo.member_type==3">
											<text class="price-tip">¥</text>{{row.vip.min==undefined?'-': row.vip.max | money}} ~
											<text class="price-tip">¥</text>{{row.vip.min==undefined?'-': row.vip.max | money}}
										</text>
										<text class="price" v-else>
											<text class="price-tip">¥</text>{{row.sale.min==undefined?'-': row.sale.max | money}} ~ 
											<text class="price-tip">¥</text>{{row.sale.min==undefined?'-': row.sale.max | money}}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-check" v-show="checkHide">
			<view class=""  @click="allCheck('all')" >
				<label>
					<checkbox :value="0" color="#FF5E00" :checked="allChecked"/><text>全选</text>
				</label>
			</view>
			<view class="delete-btn" @click="deleteAll()">
				删除记录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		
		data() {
			return {
				goodsList: [],
				headerTop: 0,
				//控制滑动效果
				typeClass: 'goods',
				subState: '',
				theIndex: null,
				oldIndex: null,
				isStop: false,
				checkHide: false,
				allChecked: false,
				goodsIdList:[],
				pageNo:1,//当前页
				pageSize:10,//当前条数
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			this.loadGoodsInfo(this);
			this.pageNo = 1
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			...mapState(['userInfo']),
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			let that = this;
			
			if (that.pageNo >= that.pageNos) {
				return;
			}
			uni.showLoading({
				title:'加载中',
			})
			//加载我的订单
			that.pageNo= that.pageNo + 1;
			that.loadAttenList(that);
		},
		onLoad() {
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			this.loadGoodsInfo(this);
		},
		methods: {
			// 查询商品
			loadGoodsInfo(that) {
				let pageNo = that.pageNo, //把第几次加载次数作为参数
					pageSize = that.pageSize; //返回数据的个数  
				that.$http
					.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.collectionList,
						data: {
							page:pageNo,
							page_size:pageSize
						}
					})
					.then(res => {
						uni.hideLoading();
						let _data = res.data;
						if (_data.code === 200) {
							 if (that.pageNo <= 1) {
								if (_data.result.list.length == 0) {
								} else {
									that.goodsList= _data.result.list;
								}
								that.pageNos= (_data.result.total+(pageSize-1))/pageSize;
							} else {
								that.goodsList=that.goodsList.concat(_data.result.list);
							}
							that.pageNo = pageNo;
							let goodsListLin = that.goodsList;
							let goodsList = goodsListLin.map(item=>{
								item.goods_pic = item.goods_pic.split(',')
								item.selected = false;
								return item;
							});
							that.goodsList = goodsList;
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			navTo(url,id){
				this.$Router.push({name:url,params:{id:id}});
			},
			// 全选
			allCheck(type, index) {
				//选中状态处理
				if (type === 'item') {
					this.goodsList[index].selected = !this.goodsList[index].selected;
					if(this.goodsList[index].selected==false){
						for(var i=0;i<this.goodsIdList.length;i++){
							if(this.goodsList[index].goods_id==this.goodsIdList[i]){
								this.goodsIdList.splice(i,1)
							}
						}
						
					}else{
						this.goodsIdList.push(this.goodsList[index].goods_id)
					}
					this.allChecked = false
				} else {
					const checked = !this.allChecked
					
					const list = this.goodsList;
					let goodtList = list.map(item=>{
						item.selected = checked;
						this.goodsIdList.push(item.goods_id)
						return item;
					});
					
					this.goodsList = goodtList;
					this.allChecked = checked;
				}
			},
			// 编辑
			edit(value) {
				if (value) {
					const list = this.goodsList;
					let goodtList = list.map(item=>{
						item.selected = false;
						return item;
					});
					this.goodsList = goodtList;
					this.allChecked = false;
					this.checkHide = false;
				} else {
					this.checkHide = true;
				}

			},
			switchType(type) {
				if (this.typeClass == type) {
					return;
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.typeClass = type;
				this.subState = this.typeClass == '' ? '' : 'show' + type;
				setTimeout(() => {
					this.oldIndex = null;
					this.theIndex = null;
					this.subState = this.typeClass == 'goods' ? '' : this.subState;
				}, 200)
			},
			//控制左滑删除效果-begin
			touchStart(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
			},
			touchMove(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];

				if (this.isStop || Math.abs(moveX) < 5) {
					return;
				}
				if (Math.abs(moveY) > Math.abs(moveX)) {
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}

				if (moveX < 0) {
					this.theIndex = index;
					this.isStop = true;
				} else if (moveX > 0) {
					if (this.theIndex != null && this.oldIndex == this.theIndex) {
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(() => {
							this.oldIndex = null;
						}, 150)
					}
				}
			},

			touchEnd(index, $event) {
				//解除禁止触发状态
				this.isStop = false;
			},
			deleteAll(){
				console.log(this.goodsIdList)
				let that = this;
				uni.showModal({
				    title: '确定取消所有收藏吗？',
				    content: '取消收藏后，将不能恢复。',
				    success: function (res) {
				        if (res.confirm) {
				            that.cancelCollection(that,that.goodsIdList);
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			//删除商品
			deleteCoupon(id, List) {
				let that = this;
				uni.showModal({
				    title: '确定取消收藏吗？',
				    content: '取消收藏后，将不能恢复。',
				    success: function (res) {
				        if (res.confirm) {
				            let len = List.length;
				            for (let i = 0; i < len; i++) {
				            	if (id == List[i].goods_id) {
				            		List.splice(i, 1);
				            		break;
				            	}
				            }
				            that.oldIndex = null;
				            that.theIndex = null;
				            let ids = [];
				            ids.push(id)
				            that.cancelCollection(that,ids);
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			// 删除商品请求
			cancelCollection(that,ids){
				that.$http
					.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.cancelCollection,
						data: {
							goods_id:ids
						}
					})
					.then(res => {
						if (res.data.code === 200) {
							that.$api.msg('删除成功~')
							that.loadGoodsInfo(that);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			discard() {
				//丢弃
			}


		}
	}
</script>
<style lang="scss">
	view {
		display: flex;
		flex-wrap: wrap;

	}

	page {
		position: relative;
		background-color: #fff;
	}

	.hidden {
		display: none !important;
	}

	.place {
		width: 100%;
		height: 95upx;
	}

	.edit-row {
		width: 100%;
		background: rgba(245, 245, 250, 1);
		padding: 24upx 35upx;
		text-align: right;
		display: flex;
		justify-content: space-between;
	}

	.tabr {
		background-color: #fff;
		width: 100%;
		height: 95upx;
		padding: 0 3%;
		position: fixed;
		top: 0;
		z-index: 10;

		view {
			width: 50%;
			height: 90upx;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
			color: #0B0E11;
			position: relative;
		}

		.on {
			color: #FF5E00;
		}

		.border {
			height: 6upx;
			background-color: #FF5E00;
			transition: all .3s ease-out;
			width: 40upx;
			position: absolute;
			bottom: 0;
			left: 180upx;
			border-radius: 4upx;

			&.shop {
				transform: translate3d(355upx, 0, 0);
			}
		}

	}

	.list {
		width: 100%;
		display: block;
		position: relative;
		background-color: #fff;
	}

	@keyframes showGoods {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes showShop {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.bottom-check {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		height: 100upx;
		box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.04);
		z-index: 999;

		.delete-btn {
			padding: 10upx 26upx;
			background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
			border-radius: 60upx;
			font-size: 28upx;
			color: #fff;
		}

		text {
			font-size: 34rpx;
			color: #0B0E11;
			margin-left: 20upx;
		}
	}

	checkbox .wx-checkbox-input {
		border-radius: 50%;
	}

	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background:#FF5E00;
		box-shadow:0px 6upx 10upx rgba(255,94,0,0.2);
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	.sub-list {
		&.shop {
			position: absolute;
			top: 0;
			left: 100%;
			display: none;
		}

		&.showgoods {
			display: flex;
			animation: showGoods 0.20s linear both;
		}

		&.showshop {
			display: flex;
			animation: showShop 0.20s linear both;
		}

		width: 100%;
		padding: 0 0 120upx 0;

		.tis {
			width: 100%;
			height: 60upx;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
		}

		&.goods {
			.all-row {
				width: 100%;

				.time {
					padding: 35upx;
				}

				.row {
					width: 100%;
					height: 34vw;
					align-items: center;
					position: relative;
					overflow: hidden;
					border-bottom: solid 1upx #F5F5FA;

					.menu {
						.icon {
							color: #fff;
							font-size: 50upx;
						}

						position: absolute;
						width: 200upx;
						height: 100%;
						right: 0;
						justify-content: center;
						align-items: center;
						background-color: red;
						color: #fff;
						z-index: 2;
					}

					.carrier {
						@keyframes showMenu {
							0% {
								transform: translateX(0);
							}

							100% {
								transform: translateX(-28%);
							}
						}

						@keyframes closeMenu {
							0% {
								transform: translateX(-28%);
							}

							100% {
								transform: translateX(0);
							}
						}

						&.open {
							animation: showMenu 0.25s linear both;
						}

						&.close {
							animation: closeMenu 0.15s linear both;
						}

						background-color: #fff;

						position: absolute;
						width: 100%;
						padding: 0 0;
						height: 100%;
						z-index: 3;
						flex-wrap: nowrap;

						.goods-info {
							width: 100%;
							padding: 35upx;
							flex-wrap: nowrap;

							.img {
								width: calc(30vw - 20upx);
								height: calc(30vw - 20upx);
								border-radius: 10upx;
								overflow: hidden;
								flex-shrink: 0;
								margin-right: 20upx;

								image {
									width: calc(30vw - 20upx);
									height: calc(30vw - 20upx);
								}
							}

							.info {
								width: 100%;
								height: calc(30vw - 20upx);
								overflow: hidden;
								flex-wrap: wrap;
								align-content: space-between;
								position: relative;

								.title {
									width: 100%;
									font-size:30upx;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
									color: #0B0E11;
								}

								.price-number {
									width: 100%;
									justify-content: space-between;
									align-items: baseline;

									.keep-num {
										font-size: 26upx;
										color: #999;
									}

									.price {
										font-size: 40upx;
										color: #FE2130;
									}
								}
							}
						}
					}

				}
			}
		}

		.checkbox-box {
			display: flex;
			align-items: center;
			margin-right: 20upx;
		}
	}
</style>
